<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="css/layui.css" media="all">
    <link rel="stylesheet" href="css/doc.css" media="all">
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    select{
        width: 70px;
        height: 30px;
    }
</style>
<body>
<div class="kit-doc">
    <blockquote class="layui-elem-quote">部门管理</blockquote>
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col width="100">
            <col width="200">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>部门id</th>
            <th>部门名称</th>
            <th>部门负责人id</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#if !departs.records[0]??>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">添加</button>
        </#if>
        <#list departs.records as depart>
            <tr>
                <td>${depart.departmentId}</td>
                <td>${depart.departmentName}</td>
                <td>${depart.managerId}</td>
                <td>
<#--                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">添加</button>-->
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#update" onclick="update(${depart.departmentId})">修改负责人</button>
                    <button class="btn btn-danger deleteDepart">删除</button>
                </td>
            </tr>
        </#list>
        </tbody>
    </table>
</div>
<div id="demo" style="margin-left: 470px;"></div>
<!-- 添加部门  -->
<#--<div class="modal fade" id="add" tabindex="-1" role="dialog">-->
<#--    <div class="modal-dialog" role="document">-->
<#--        <div class="modal-content">-->
<#--            <form method="post" action="/addDepart">-->
<#--                <input type="hidden" name="pageNum" value="${departs.current}">&lt;#&ndash;当前第几页&ndash;&gt;-->
<#--                <div class="modal-header">-->
<#--                    <button type="button" class="close" data-dismiss="modal"><span-->
<#--                                aria-hidden="true">&times;</span></button>-->
<#--                    <h4 class="modal-title" id="exampleModalLabel">添加部门</h4>-->
<#--                </div>-->
<#--                <div class="modal-body">-->
<#--                    <div class="form-group">-->
<#--                        <label for="recipient-pass" class="control-label">部门名称:</label>-->
<#--                        <select  name="departmentName">-->
<#--                            <#list departments as d>-->
<#--                                <option value="${d.departmentName}">${d.departmentName}</option>-->
<#--                            </#list>-->
<#--                        </select>-->
<#--                    </div>-->
<#--                    <div class="form-group">-->
<#--                        <label for="recipient-pass" class="control-label">部门负责人:</label>-->
<#--                        <select name="managerId">-->
<#--                            <#list users as user>-->
<#--                                <option value="${user.id}">${user.name}</option>-->
<#--                            </#list>-->
<#--                        </select>-->
<#--                    </div>-->
<#--                </div>-->
<#--                <div class="modal-footer">-->
<#--                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<#--                    <input type="submit" class="btn btn-primary" value="添加"/>-->
<#--                </div>-->
<#--        </div>-->
<#--    </div>-->
<#--    </form>-->
<#--</div>-->
<!-- 修改部门  -->
<div class="modal fade" id="update" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="post" action="/updateDepart">
                <input type="hidden" name="pageNum" value="${departs.current}"><#--当前第几页-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >修改部门</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="departmentId" id="departmentId" class="form-control">
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">部门名称:</label>
                        <select  name="departmentName" id="departmentName">
                            <#list departments as d>
                                <option value="${d.departmentName}">${d.departmentName}</option>
                            </#list>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">部门负责人:</label>
                        <select  name="managerId" id="managerId">
                            <#list users as user>
                                <option value="${user.id}">${user.name}</option>
                            </#list>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <input type="submit" class="btn btn-primary" value="修改"/>
                </div>
        </div>
    </div>
    </form>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/layui.all.js"></script>
<script>
    //获取项目路径
    function URL() {
        return window.location.protocol + "//" + window.location.host + "/";
    }
    layui.use(['laypage'], function () {
        var laypage = layui.laypage
        laypage.render({
            elem: 'demo'
            , curr: '${departs.current}'    //当前第几页
            , count: '${departs.total}'     //总记录数
            , limit: '${departs.size}'      //每页记录数
            , theme: '#009688'
            , jump: function (obj,first) {
                if(!first){
                    window.location.href = URL() + "departManage?pageNum=" + obj.curr;
                }
            }
        });
    });
    //删除部门
    $('.deleteDepart').click(function () {
        let id = $(this).parents("tr").find("td").eq(0).text();
        if(window.confirm("确认删除第" +id+"个部门吗？")){
            $.ajax({
                url: URL() + "delDepart?",
                type: "DELETE",
                data: "id=" + id,
                success: function() {
                    window.location.reload();
                }
            });
        }
    });
    //修改部门信息
    function update(e) {
        $.get(
            "getDepart?id=" + e,
            function (data) {
                $("#departmentId").val(data.departmentId);
                $("#departmentName").val(data.departmentName);
                $("#managerId").val(data.managerId);
            }
        )
    }
</script>
</body>
</html>